<template>
  <transition>
    <div>
      <div class="logo">
        <img src="@/assets/img/loginimg.svg" class="logo-img">
        <span class="logo-text">就业职通车</span>
      </div>
      <div class="loginBox">
        <form>
          <div class="user-input">
            <el-icon :size="16" class="login-img">
              <i-ep-user />
            </el-icon>
            <input v-model="user" class="login_input" type="text" placeholder="请输入账号" />
          </div>
          <div class="user-input">
            <el-icon :size="16" class="login-img">
              <i-ep-lock />
            </el-icon>
            <input v-model="password" class="login_input" type="password" placeholder="请输入密码" />
          </div>
          <div class="login-btn">
            <el-button @click="login" class="login-submit login-active" style="width: 45%;">登录</el-button>
            <el-button @click="res" class="login-submit" style="width: 45%;">注册</el-button>
          </div>
        </form>
      </div>
    </div>
  </transition>
</template>
<script setup>
import { inject, ref } from 'vue'
import useUserStore from '@/store/index.js'
import { useRouter } from "vue-router"
const router = useRouter()
const $axios = inject('$axios')
const $root = inject('$root')
const store = useUserStore();
let user = ref("")
let password = ref("")
//存储用户Token和用户名
const setToken = (token, username) => {
  store.addUserData(token, username)
  user.value = ""
  password.value = ""
  router.back()

}
//登录
const login = () => {
  $axios.post($root + `/user/login/`, {
    username: user.value,
    password: password.value
  })
    .then(r => {
      if (r.data.data) {
        setToken(r.data.data, user.value)
        ElMessage({
          message: '账户登录成功',
          type: 'success',
        })
      }
      else {
        ElMessage.error('账户登录失败')
      }
    })
}
//注册
const res = () => {
  $axios.post($root + `/user/register/`, {
    username: user.value,
    password: password.value
  })
    .then(r => {
      if (r.data.code == 200) {
        ElMessage({
          message: '账户注册成功',
          type: 'success',
        })
        setToken(r.data.data, user.value)
      }
      else {
        ElMessage.error('账户注册失败')
      }
    })
}

</script>

<style scoped>
.logo {
  width: 50vw;
  margin: 30px auto 35px auto;
  text-align: center;
}

.logo-img {
  width: 100%;
}

.logo-text {
  letter-spacing: 4px;
  font-size: 20px;
  color: rgb(66, 165, 245);
}

.login_input {
  background: #efefef;
  border-radius: 50px;
  height: 36px;
  padding: 0 34px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e0e0e0;
  outline: none;
}

.login-img {
  position: absolute;
  color: #9d9d9d;
  top: 8px;
  left: 12px;
}

.user-input,
.login-btn {
  width: 80vw;
  position: relative;
  margin: auto;
  margin-top: 20px;
}

.login-btn {
  display: flex;
  justify-content: space-between;
}

.login-submit {
  border-radius: 36px;
  height: 36px;
  font-size: 16px;
  font-weight: normal;
  box-sizing: border-box;
  border: 2px solid #1296db;
  line-height: 16px;
}

.login-submit {
  background: transparent;
  border: 1px solid #1296db;
  color: #1296db;
}

.login-active {
  background: #1296db;
  color: white;
}
</style>

<script setup>
</script>